<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Home</title>
	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/common.css?2">
	<link rel="stylesheet" href="css/index.css?1">
	<style type="text/css">
		#rocket-to-top div {
		    left:0;
		    margin:0;
		    overflow:hidden;
		    padding:0;
		    position:absolute;
		    top:0;
		    width:149px;
		}
		#rocket-to-top .level-2 {
		    background:url("images/rocket_button_up.png") no-repeat scroll -149px 0 transparent;
		    display:none;
		    height:250px;
		    opacity:0;
		    z-index:1;
		}
		#rocket-to-top .level-3 {
		    background:none repeat scroll 0 0 transparent;
		    cursor:pointer;
		    display:block;
		    height:150px;
		    z-index:2;
		}
		#rocket-to-top {
		    background:url("images/rocket_button_up.png") no-repeat scroll 0 0 transparent;
		    cursor:default;
		    display:block;
		    height:250px;
		    margin:-125px 0 0;
		    overflow:hidden;
		    padding:0;
		    position:fixed;
		    right:0;
		    top:80%;
		    width:149px;
		    z-index:11;
		}
	</style>
</head>
<body>
	<div style="display:none;" id="rocket-to-top">
		<div style="opacity:0;display:block;" class="level-2"></div>
		<div class="level-3"></div>
	</div>
	<div class="visible-sm visible-md visible-lg">
		<img class="img-responsive center-block logopc" src="images/logopc.svg">
	</div>
	<header>
	    <nav class="navbar navbar-default visible-xs navbar-fixed-top">
	        <!-- 手机端nav start -->
	        <div class="container visible-xs">
	            <div class="navbar-header page-scroll">
	                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	                    <span class="sr-only">Toggle navigation</span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                </button>
	                <div class="col-xs-6 col-xs-offset-3 mmlogowai">
	                	<img class="" src="images/mmlogo.svg">
	                </div>
	            </div>
	            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	                <ul class="nav navbar-nav navbar-right" >
	                    <li class="hidden">
	                        <a href="#page-top"></a>
	                    </li>
	                    <li>
	                        <a class="page-scroll" href="index.html">Home</a>
	                    </li>
	                    <li>
	                        <a class="page-scroll" href="campaign.html">Campaign</a>
	                    </li>
	                    <li>
	                        <a class="page-scroll" href="new.html">New Collection</a>
	                    </li>
	                    <li>
	                        <a class="page-scroll" href="store.html">Store Image</a>
	                    </li>
	                    <li>
	                        <a class="page-scroll" href="about.html">About us</a>
	                    </li>
	                </ul>
	            </div>
	        </div>
	        <!-- 手机端nav end -->
	    </nav>

	    <nav class="navbar navbarme visible-sm visible-md visible-lg" id="nav">
	        <!-- 电脑端nav start -->
	        <div class="container visible-sm visible-md visible-lg">
	        	<ul class="nav nav-pills pcmenu">
					<li class="presentation"><a href="index.html">Home</a></li>
					<li class="presentation">
						<a href="campaign.html">Campaign</a>
						<ul class="dropdown-menu">
						    <li><a href="#">2019年8月</a></li>
						    <li><a href="#">Campaign1</a></li>
						    <li><a href="#">Campaign1</a></li>
						    <li><a href="#">Campaign1</a></li>
						    <li><a href="#">Campaign1</a></li>
						    <li><a href="#">Campaign1</a></li>
						</ul>
					</li>
					<li class="presentation"><a href="new.html">New Collection</a></li>
					<li class="presentation">
						<a href="store.html">Store Image</a>
					</li>
					<li class="presentation"><a href="about.html">About us</a></li>
				</ul>
	        </div>
	        <!-- 电脑端nav end -->
	    </nav>
	</header>
	<div class="visible-xs visible-ms martop"></div>

	<!-- 主题图片 -->
	<div class="container-fluid banners">
		<div class="about-title">
			<img class="img-responsive center-block" src="images/home_banner1.png">
		</div>

		
	</div>
	
	<div class="container-fluid banners">
		<div class="row product_img_list">
			<!-- 中图两张 -->
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_1.png">
			</div>
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_2.png">
			</div>
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_3.png">
			</div>
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_4.png">
			</div>

			<!-- 全屏大图1张 -->
			<div class="col-md-12 col-sm-12 col-xs-12 product_img">
				<img class="img-responsive center-block" src="images/home_page_6.png">
			</div>

			<!-- 小图4张 -->
			<div class="col-md-3 col-sm-3 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_10.png">
			</div>
			<div class="col-md-3 col-sm-3 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_11.png">
			</div>
			<div class="col-md-3 col-sm-3 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_12.png">
			</div>
			<div class="col-md-3 col-sm-3 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_13.png">
			</div>

			<!-- 中图两张 -->
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_14.png">
			</div>
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_15.png">
			</div>

			<!-- 全屏大图1张 -->
			<div class="col-md-12 col-sm-12 col-xs-12 product_img">
				<img class="img-responsive center-block" src="images/home_page_7.png">
			</div>

			<!-- 中图两张 -->
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_8.png">
			</div>
			<div class="col-md-6 col-sm-6 col-xs-6 product_img">
				<img class="img-responsive center-block" src="images/home_page_9.png">
			</div>

		</div>
	</div>

	<div class="container-fluid footer">
		<div class="row">
			<div class="col-md-8 col-xs-12 footer_con">
				<p>Copyright @2019-Octopus - All rights reserved.</p>
				<p>Powered by Wordpress</p>
			</div>
			<div class="col-md-4 col-xs-12 text-center links">
				<a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
				<a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
				<a href=""><i class="fa fa-reddit-square" aria-hidden="true"></i></a>
				<a href=""><i class="fa fa-google" aria-hidden="true"></i></a>
				<a href=""><i class="fa fa-vimeo-square" aria-hidden="true"></i></a>
				<a href=""><i class="fa fa-futbol-o" aria-hidden="true"></i></a>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/menu.js"></script>
<script type="text/javascript">
	$(function() {
	var e = $("#rocket-to-top"),
	t = $(document).scrollTop(),
	n,
	r,
	i = !0;
	$(window).scroll(function() {
		var t = $(document).scrollTop();
		t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
			marginTop: "-1000px"
		},
		"normal",
		function() {
			e.css({
				"margin-top": "-125px",
				display: "none"
			}),
			i = !0
		})) : e.fadeIn("slow")
	}),
	e.hover(function() {
		$(".level-2").stop(!0).animate({
			opacity: 1
		})
	},
	function() {
		$(".level-2").stop(!0).animate({
			opacity: 0
		})
	}),
	$(".level-3").click(function() {
		function t() {
			var t = e.css("background-position");
			if (e.css("display") == "none" || i == 0) {
				clearInterval(n),
				e.css("background-position", "0px 0px");
				return
			}
			switch (t){
			case "0px 0px":
				e.css("background-position", "-298px 0px");
				break;
			case "-298px 0px":
				e.css("background-position", "-447px 0px");
				break;
			case "-447px 0px":
				e.css("background-position", "-596px 0px");
				break;
			case "-596px 0px":
				e.css("background-position", "-745px 0px");
				break;
			case "-745px 0px":
				e.css("background-position", "-298px 0px");
			}
		}
		if (!i) return;
		n = setInterval(t, 50),
		$("html,body").animate({scrollTop: 0},"slow");
	});
});
</script>
</html>